<template>
    <div class="newstady">
        <div class="neirong-top">

            <router-link to="/home">
                <span class="iconfont icon-arrow-left-bold"></span>
            </router-link>

            <span style="font-size: 14px;font-weight: 800;">
                {{ page + 1 }} / {{ studylist.length }}</span>
            <span class="iconfont icon-gengduo"></span>
        </div>

        <h1>{{ studylist[page].name }}</h1>
        <h5>{{ studylist[page].phonetic }}</h5>
        <div class="pbox">
            <p v-for="mean in studylist[page].meaning" :key="mean">{{ mean }}</p>
            <!-- <p>vt. 故意伤害，激怒</p> -->
        </div>
        <div class="footmode">
            <span class="iconfont icon-shangyishou1" @click="lastpage()"></span>
            <!-- <span class="iconfont icon-banzou" @click="finishword(studylist[page].id)"></span> -->
            <van-icon name="eye-o" size="40" @click="finishword(studylist[page].id),eyeicon()" v-if="!eye" />
            <van-icon name="closed-eye" size="40" @click="finishword(studylist[page].id),eyeicon()" v-if="eye" />
            <span class="iconfont icon-xiayishou1" @click="nextpage()"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['cet4list'],
    data() {
        return {
            studylist: [],
            page: 0,
            eye: false
        };
    },
    methods: {
        copylist() {
            this.studylist = [];
            this.cet4list.forEach((item) => {
                if (!item.stadydone == true) {
                    this.studylist.push(item)
                }
            });
            console.log(this.studylist, "对");
            return this.studylist
        },
        nextpage() {
            this.page += 1
            if (this.page >= this.studylist.length) {
                this.page = 0
            }
        },
        lastpage() {
            this.page -= 1
            if (this.page < 0) {
                this.page = this.studylist.length - 1
            }
        },
        finishword(id) {
            this.$emit("finishword", id);
        },
        eyeicon() {
            this.index = this.cet4list.findIndex(item => item.id == this.studylist[this.page].id)
            if(this.cet4list[this.index].stadydone){
                this.eye=true
            }else{
                this.eye=false
            }
            // return this.cet4list[this.index].stadydone==true
        }
    },
    computed: {

    },
    created() {
        this.copylist()
    },
    mounted(){
        this.copylist()
    }
}
</script>

<style lang="scss" scoped>
.newstady {
    min-height: 667px;
    backdrop-filter: blur(60px);
    box-shadow: 300px 300px 100px;

    .neirong-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        /* position: absolute; */
        /* top: 35px; */

        span {
            font-size: 20px;
            color: black;
            padding: 0 18px;
        }

    }

    h1 {
        text-align: center;
        font-size: 36px;
        padding-top: 80px;
        font-weight: 600;
    }

    h5 {
        padding-top: 20px;
        text-align: center;
        color: #464546;
        font-weight: 600;
    }

    .pbox {
        text-align: center;
        padding-top: 130px;

        p {
            padding: 18px;
            font-weight: 600;
        }
    }

    .footmode {
        width: 100%;
        // padding: 15px;
        padding-bottom: 50px;
        position: absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        span {
            font-size: 38px;
        }
    }
}
</style>